

(function () {

	const itemList = [
		{id:1,content:'吃饭',completed:true},
		{id:2,content:'吃饭',completed:true},
		{id:3,content:'吃饭',completed:true},
	]


	// el : 指令所绑定的元素，可以用来直接操作DOM
	// binding: 一个对象，包含指令的很多信息
	// vnode: VUE编译生成的虚拟节点
	//directive的生命周期：
	// bind： 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
	//
    // inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
	//
	// update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
	//
	// componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
	//
	// unbind: 只调用一次，指令月元素解绑的时候调用


	//自定义指令：
	Vue.directive('focus',{
		inserted(el,binding){
			el.focus()
		},
		update(el,binding){
			if (binding.value){
				el.focus()
			}
		}
	})

	const vm = new Vue({
		el:'#app',
		data:{
			items:itemList,
			//切换当前任务状态的属性，其中包含 All、active、completed
			filterStatus:'',
			currentItem:{}
		},
		methods:{
			addItem(event){
				//取触发kepup.enter该事件的节点的value值
				//trim()函数是去除头跟尾的空白符号
				let content = event.target.value.trim()
				if (!content){
					return
				}
				//取items中最后一个对象的id+1赋予新的对象的id值
				let id = this.items[this.items.length - 1].id+1
				this.items.push({
					id,
					content,
					completed:false
				})
				// 把事件的value值赋为空
				event.target.value = ''
			},
			deleteItem(id){
				// 通过传入的id过滤掉要删除的item
				this.items = this.items.filter(item => item.id !== id)
			},
			clearCompleted(){
			    this.items = this.items.filter(item => !item.completed)
			},
			toEdit(item){
				this.currentItem = item
			},
			// 当触发@keyup.esc事件，也就是按下ESC键，就调用该函数推出编辑状态
			cancelEdit(){
				this.currentItem = {}
			},
			// 失去焦点时候，也就是触发blur函数，调用该函数保存数据
			finishEdit(item,index,event){
				const content = event.target.value.trim()
				// 如果内容为空则，删除这一条item
				if (!content){
					this.deleteItem(item.id)
					return
				}
				item.content = content
				this.currentItem = {}
			},
			getItems(){
				//从本地获取数据
				this.items = JSON.parse(localStorage.getItem('item')) || []
			}
		},
		computed:{
			total(){
				// 通过filter过滤出还没完成的任务的长度
				return this.items.filter(item => !item.completed).length
			},
			toggleAll:{
				//get与set的区别：默认会用get方法来回调该属性，当这个属性发生变化时候就回调set方法
				get(){
					return this.total === 0
				},
				// 因为input是checked类型只有选中与不选中之分，若选中就回调set函数，传入true或者false给newStatus，从而改变completed属性
				set(newStatus){
					this.items.forEach(item =>{
						item.completed = newStatus
					})
				}
			},
			//封装好全部、未完成、已完成三种类型不同的对象，通过filter过滤，赋值定义的items变量
			filterItems(){
				let items
				switch (this.filterStatus){
					case '/active':
						items = this.items.filter(item => !item.completed)
						break
					case '/completed':
						items = this.items.filter(item => item.completed)
						break
					default:
						items = this.items
						break;
				}
				return items
			}
		},
		created(){
			// 渲染所有页面时候，调用getItems()从本地获取数据
			this.getItems()
		},
		watch:{
			//对items进行监听
			items:{
				//发生变化就执行handler函数
				handler(val){
					//localStorage是本地缓存，H5的新特性
					//localStorage的使用：
					// localStorage.getItem(key):获取指定key本地存储的值
					// localStorage.setItem(key,value)：将value存储到key字段
					localStorage.setItem('item',JSON.stringify(val))
				},
				//深度监听deep：如果监听是一个对象，就加deep：true，可以监听到对象里面的属性
				deep:true,
				//watch默认，页面首次加载是不会执行监听函数，想要首次页面加载就执行监听函数，就加该属性：immediate：true
				immediate:true
			}
		}
	})
	// 当hash变化时，就调用onhashchange这个函数
	window.onhashchange = function (){
		// 通过location.hash获取当前url赋值给filterStatus
		vm.filterStatus = location.hash.slice(1)
	}

	//全局api：在构造器外面用vue提供给我们的api函数来定义新的功能.
})();
